<template>
	<view class="environmentalprotection">
		<titleName :name="name" :backShow="true"></titleName>
		<!-- <view class="title-bgc"></view> -->
		<view class="content-wrap">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<input type="text" v-model="title" placeholder="搜索感兴趣的内容" placeholder-class="ipt-style" />
					<!-- <image  src="../../static/search.png" mode=""></image> -->
					<button @click="getList">搜索</button>
				</view>
				<view class="select">
					<view class="news" :class="seltop==1?'active':''" @click="changeOne">环保新闻</view>
					<view class="politics" :class="seltop==2?'active':''" @click="changeTwo">政策法规</view>
				</view>
			</view>
			<view class="list">
				<uni-load-more iconType="circle" status="loading" v-if="flagData" />

				<noData v-if="dataList.length==0 && !flagData" />
				<view class="item" @click="jumpEnvironmentDetail(item.id,item)" v-for="item in dataList" :key="item.id">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<view class="msg">
							<view class="date">{{item.publishdate}}</view>
							<view class="read-num">阅读量：{{item.viewnum}}</view>
						</view>
					</view>
					<view class="right">
						<image style="width: 100%;height: 100%;" :src="item.headimglarge" mode=""></image>
					</view>
				</view>

			</view>
		</view>



	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'

	import http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	let name = "环保资讯"
	let status = ref('loading')
	let seltop = ref(1)
	let dataList = ref([])
	let flagData = ref(true)
	let title = ref('')
	let usertype = ref('')
	let jumpEnvironmentDetail = (id,item) => {
		if(item.articletype==2){
			uni.navigateTo({
				url:`/messagePageOther/guide/index?msg=${item.linkurl}`
			})
		}else{
			uni.navigateTo({
				// url: `/homePageOther/environmentdetail/index`
				url: `/homePageOther/environmentdetail/index?id=${id}`
			})
		}
		
	}
	let changeOne = () => {
		seltop.value = 1
		getList()
	}
	let changeTwo = () => {
		seltop.value = 2
		getList()
	}

	onShow(() => {
		usertype.value = uni.getStorageSync("usertype")
		getList()
	})
	let getList = () => {
		flagData.value = true
		dataList.value = []
		let url = ''
		if (usertype.value == 9) {
			url = '/greenAdmArticle/datalist'
		}else{
			url = '/greenArticle/datalist'
		}
		http({
			url,
			data: {
				columnid: seltop.value,
				title: title.value
			}
		}).then((res) => {

			if (res.code == 0) {
				flagData.value = false
				dataList.value = res.data.list
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-style) {

		font-weight: 400;
		font-size: 25rpx;
		color: #ABABBB;

	}

	.environmentalprotection {
		width: 100vw;
		height: 100vh;
		// padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.content-wrap {
			background-color: #F3F5F7;
			height: calc(100vh - 160rpx);

		}

		.list {
			height: calc(100vh - 192rpx - 160rpx);
			padding-bottom: 17rpx;
			overflow: scroll;

			.item {
				padding: 29rpx 29rpx 40rpx 29rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				margin-top: 10rpx;

				.left {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {

						font-weight: 500;
						font-size: 30rpx;
						color: #070707;
						max-height: 130rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;

					}

					.msg {
						display: flex;
						justify-content: space-between;

						.date {

							font-weight: 400;
							font-size: 21rpx;
							color: #9494A3;

						}

						.read-num {
							font-weight: 400;
							font-size: 21rpx;
							color: #9494A3;
						}
					}
				}

				.right {
					width: 251rpx;
					height: 169rpx;
					background: #DCDCDC;
					border-radius: 7rpx;
					margin-left: 53rpx;
					flex-shrink: 0;
				}
			}
		}


		.search-wrap {
			width: 100vw;
			padding: 25rpx 30rpx 32rpx 30rpx;
			background-color: #fff;

			.select {
				padding-left: 4rpx;
				margin-top: 31rpx;
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #8F8FA1;


				.news {}

				.politics {
					margin-left: 101rpx;
				}

				.active {

					font-weight: bold;
					font-size: 28rpx;
					color: #070707;
					position: relative;
				}

				.active::after {
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: -12rpx;
				}


			}

			.ipt-wrap {
				display: flex;
				padding-left: 34rpx;

				justify-content: space-between;
				width: 100%;
				align-items: center;
				height: 75rpx;
				background: #F7F7FE;
				border-radius: 38rpx;

				input {
					height: 100%;
					width: 100%;
				}

				button {
					flex-shrink: 0;
					width: 112rpx;
					height: 74rpx;
					background: #0874FA;
					border-radius: 14rpx;
					line-height: 74upx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;

				}
			}

			image {
				width: 31rpx;
				height: 31rpx;
			}
		}



	}
</style>